<!DOCTYPE html>
<html lang="en">

<head>
    <meta>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>Document</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="./js/store.legacy.min.js"></script>
</head>

<body>
    <button style="padding: 10px; margin: 10px;" onclick="store.clearAll()">清除缓存</button>
    <!-- <img width="100%" data-src='./images/1.jpg' src="./images/default.gif"> -->
    <!--     <img width="100%" data-src='./images/5.jpg' src="./images/default.gif">
    <img width="100%" data-src='./images/6.jpg' src="./images/default.gif">
    <img width="100%" data-src='./images/2.png' src="./images/default.gif">
    <img width="100%" data-src='./images/3.png' src="./images/default.gif">
    <img width="100%" data-src='./images/4.png' src="./images/default.gif"> -->
    <img width="100%" data-src='./images/5.png' src="./images/default.gif">
    <img width="100%" data-src='./images/6.png' src="./images/default.gif">
    <!--     <img width="100%" data-src='./images/7.png' src="./images/default.gif">
    <img width="100%" data-src='./images/4.jpg' src="./images/default.gif"> -->
    <script type="text/javascript">
    //获取img url
    var imgAY = selectAll('img');
    var srcImg = [];

    for (var i = 0; i < imgAY.length; i++) {
        srcImg.push(imgAY[i].getAttribute('data-src'));
    }

    //启动缓存
    var oCaches = store.get('imgCache');
    localStrogeImg(srcImg);

    /**
     * [localStrogeImg 图片本地缓存]
     * @Author   zhanggongze
     * @DateTime 2017-06-01
     * @param    {[array]}    srcImg [图片data-src属性]
     * @return   {[type]}           [description]
     */
    function localStrogeImg(srcImg) {

        if (oCaches == undefined) {

            //保存图片编码
            var imgBase = {};

            for (var j = 0; j < srcImg.length; j++) {
                loadImg(srcImg[j], j, imgBase);
            }

        } else {

            for (var key in oCaches) {
                cacheImg(key);
            }
        }

        console.log(oCaches);

    };


    /**
     * [loadImg 读取服务器上的图片]
     * @Author   zhanggongze
     * @DateTime 2017-06-03
     * @param    {[type]}    src   [图片资源地址]
     * @param    {[type]}    index [图片地址索引 跟展示的时候顺序对应]
     * @return   {[type]}          [description]
     */
    function loadImg(src, index, imgBase) {

        var oImg = new Image();
        oImg.src = src;

        oImg.onload = function() {
            //展示图片
            imgAY[index].setAttribute('src', src);
            //转码
            imgBase[src] = getBase64Image(oImg);
            //将图片的Base64编码 缓存起来
            store.set('imgCache', imgBase);

        }

    };

    /**
     * [cacheImg 读取缓存图片]
     * @Author   zhanggongze
     * @DateTime 2017-06-03
     * @param    {[type]}    m [description]
     * @return   {[type]}      [description]
     */
    function cacheImg(key) {
        selectId('[data-src="' + key + '"]').setAttribute('src', oCaches[key]);
    }

    /**
     * [getBase64Image 将图片转成Base64编码]
     * @Author   zhanggongze
     * @DateTime 2017-06-03
     * @param    {[type]}    img [图片对象]
     * @return   {[type]}        [Base64编码]
     */
    function getBase64Image(img) {

        var canvas = document.createElement("canvas");

        canvas.width = img.width;
        canvas.height = img.height;

        var ctx = canvas.getContext("2d");

        ctx.drawImage(img, 0, 0, img.width, img.height);

        var dataURL = canvas.toDataURL("image/jpg");

        return dataURL

    };

    //ID选择器
    function selectId(str) {
        return document.querySelector(str);
    }

    //元素选择器
    function selectAll(str) {
        return document.querySelectorAll(str);
    }
    </script>
</body>

</html>
